import React, { Component } from "react";

import MeunConfig from "../../config/menuConfig";

import { Menu } from "antd";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { switchMenu } from "../../redux/actions";
import "./index.scss";

const { SubMenu } = Menu;
class NavLeft extends Component {
  state = {
    currentKey: ""
  };
  UNSAFE_componentWillMount() {
    const menuTreeNode = this.renderMenu(MeunConfig);
    let currentKey = window.location.hash.replace("#", "");
    this.setState({
      currentKey,
      menuTreeNode
    });
  }
  //菜单渲染
  renderMenu = data => {
    return data.map(item => {
      if (item.children) {
        return (
          <SubMenu title={item.title} key={item.key}>
            {this.renderMenu(item.children)}
          </SubMenu>
        );
      }
      return (
        <Menu.Item title={item.title} key={item.key}>
          <Link to={item.key}> {item.title}</Link>
        </Menu.Item>
      );
    });
  };
  render() {
    return (
      <div>
        <div className="logo">
          <img src="/assets/logo.svg" alt="" />
          <h1>XinHua MS</h1>
        </div>
        <Menu
          onClick={this.handelClick}
          selectedKeys={this.state.currentKey}
          theme="dark"
        >
          {this.state.menuTreeNode}
        </Menu>
      </div>
    );
  }
  handelClick = ({ item, key }) => {
    const { dispatch } = this.props;
    dispatch(switchMenu(item.props.title));
    this.setState({
      currentKey: key
    });
  };
}
export default connect()(NavLeft);
